<template>
  <div>
    <div class="ddisp jz wh_7" style="min-width: 1200px">
      <div class="topdq" style="width: calc(100% - 300px);">
        <div class="wh_9 jz pad_15_0">
          <div class="blue_jb pad_10_0">
            <span class="mag_l-10 xsgb" @click="pageTo(item)" v-for="(item,index) in daohang" :key="index">{{ item.tit }} > </span>
          </div>
          <div class="mag_t-20">
            <div>
              <div class="ddisp wh_f bor_b_hui">
                <div  @click="addtitle(380)" class="flex_1 em fz_18 pad_5_0 xsgb" style="color: #054a98">现代课堂</div>
                <div @click="addtitle(380)" class="flex_1 flex_r xsgb">更多</div>
              </div>
              <van-steps class="mag_t-20" direction="vertical" :active="10">
                <van-step v-for="(item,index) in xiandaiketangList" :key="index">
                  <span class="steps">{{ item.updatetime | date }}</span>
                  <h3 @click="addList(item,[
                  {tit:'首页',path:'homeList'},
                  {tit:'新闻中心',path:'xinwenzhongxin'},
                  {tit:'聚焦',path:'jujiao'}
                ])" class="steps_title">{{ item.title }}</h3>
                </van-step>
              </van-steps>
            </div>
            <div>
              <div class="ddisp wh_f bor_b_hui">
                <div  @click="addtitle(380)" class="flex_1 em fz_18 pad_5_0 xsgb" style="color: #054a98">课题研究</div>
                <div @click="addtitle(380)" class="flex_1 flex_r xsgb">更多</div>
              </div>
              <van-steps class="mag_t-20" direction="vertical" :active="10">
                <van-step v-for="(item,index) in ketiyanjiuList" :key="index">
                  <span class="steps">{{ item.updatetime | date }}</span>
                  <h3 @click="addList(item,[
                  {tit:'首页',path:'homeList'},
                  {tit:'新闻中心',path:'xinwenzhongxin'},
                  {tit:'聚焦',path:'jujiao'}
                ])" class="steps_title">{{ item.title }}</h3>
                </van-step>
              </van-steps>
            </div>
            <div>
              <div class="ddisp wh_f bor_b_hui">
                <div  @click="addtitle(380)" class="flex_1 em fz_18 pad_5_0 xsgb" style="color: #054a98">教师发展</div>
                <div @click="addtitle(380)" class="flex_1 flex_r xsgb">更多</div>
              </div>
              <van-steps class="mag_t-20" direction="vertical" :active="10">
                <van-step v-for="(item,index) in jiaoshifazhanList" :key="index">
                  <span class="steps">{{ item.updatetime | date }}</span>
                  <h3 @click="addList(item,[
                  {tit:'首页',path:'homeList'},
                  {tit:'新闻中心',path:'xinwenzhongxin'},
                  {tit:'聚焦',path:'jujiao'}
                ])" class="steps_title">{{ item.title }}</h3>
                </van-step>
              </van-steps>
            </div>
          </div>
          </div>
      </div>
      <div class="topdq" style="width: 300px">
        <div class="topdq">
          <!--新闻-->
          <div class=" mag_tb_20">
            <div class="listba split_2">
              <div class="fz_22 boxs centerdq " style="color: #333;"><span class="xsgb aColor">新闻</span></div>
              <div class="centerdq">
                <span @mousemove="edd(1)" :class="xwHover==1?'bColor':''" class="xsgb">一天</span>
                <span @mousemove="edd(2)" :class="xwHover==2?'bColor':''" class="mag_l-10 xsgb">一周</span>
              </div>
            </div>

            <div class="ddisp"  style="min-height: 500px;">
              <div>
                <div v-for="(item,index) in xinwen" :key="index">
                  <div v-if="index<=10" class="ddisp pad_10_0 xsgb">
                    <div :class="
                    index==0?'ba1':''||
                    index==1?'ba2':''||
                    index==2?'ba3':''||
                    index==3?'ba4':''||
                    index==4?'ba5':''||
                    index==5?'ba6':''||
                    index==6?'ba7':''||
                    index==7?'ba8':''||
                    index==8?'ba9':''||
                    index==9?'ba10':''
" class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;"><span>{{ index+1 }}</span></div>
                    <div class="centerdq" style="width: calc(100% - 50px)">
                      <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ item.title }}</div>
                    </div>
                  </div>
                </div>

<!--                <div v-if="xinwen[1]!=''" class="ddisp pad_10_0 xsgb"background-color: #f35a55>-->
<!--                  <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f79690"><span>2</span></div>-->
<!--                  <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                    <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[1].title }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div v-if="xinwen[2]!=''" class="ddisp pad_10_0 xsgb">-->
<!--                  <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f9beba"><span>3</span></div>-->
<!--                  <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                    <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[2].title }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div v-if="xinwen[3]!=''" class="ddisp pad_10_0 xsgb">-->
<!--                  <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #0263c4"><span>4</span></div>-->
<!--                  <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                    <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[3].title }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div v-if="xinwen[4]!=''" class="ddisp pad_10_0 xsgb">-->
<!--                  <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#3582d0 "><span>5</span></div>-->
<!--                  <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                    <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[4].title }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div v-if="xinwen[5]!=''" class="ddisp pad_10_0 xsgb">-->
<!--                  <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #7fb1e2"><span>6</span></div>-->
<!--                  <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                    <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[5].title }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div v-if="xinwen[6]!=''" class="ddisp pad_10_0 xsgb">-->
<!--                  <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #4ac4f6"><span>7</span></div>-->
<!--                  <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                    <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[6].title }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div v-if="xinwen[7]!=''" class="ddisp pad_10_0 xsgb">-->
<!--                  <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#92dbfb"><span>8</span></div>-->
<!--                  <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                    <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[7].title }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div v-if="xinwen[8]!=''" class="ddisp pad_10_0 xsgb">-->
<!--                  <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #b7e7fd"><span>9</span></div>-->
<!--                  <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                    <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[8].title }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div v-if="xinwen[9]!=''" class="ddisp pad_10_0 xsgb">-->
<!--                  <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#b5e8fd "><span>10</span></div>-->
<!--                  <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                    <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[9].title }}</div>-->
<!--                  </div>-->
<!--                </div>-->
              </div>
            </div>
          </div>
          <!--热门视频-->
          <div>
            <div class="listba">
              <div class="fz_22 boxs centerdq " style="color: #333;"><span class="xsgb aColor">热门视频</span></div>
            </div>
            <div v-if="remenshipinList!=''">

              <div class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f35a55"><span>1</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;" v-if="remenshipinList!=''">{{ remenshipinList[0].title }}</div>
                </div>
              </div>

              <div v-if="remenshipinList[0]!=''" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f79690"><span>2</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ remenshipinList[1].title }}</div>
                </div>
              </div>
              <div v-if="remenshipinList[1]!=''" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f9beba"><span>3</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ remenshipinList[2].title }}</div>
                </div>
              </div>
              <div v-if="remenshipinList[2]!=''" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #0263c4"><span>4</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ remenshipinList[3].title }}</div>
                </div>
              </div>
              <div v-if="remenshipinList[3]!=''" class="ddisp pad_10_0 xsgb">
                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#3582d0 "><span>5</span></div>
                <div class="centerdq" style="width: calc(100% - 50px)">
                  <div class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ remenshipinList[4].title }}</div>
                </div>
              </div>

            </div>
          </div>
<!--          <div class="img_100 img_20 mag_tb_20">-->
<!--            <a class="xsgb" v-for="(item,index) in ggList" :key="index"><img class="pad_5_0" :src="$store.state.imageUrltitle+item.image"/></a>-->
<!--          </div>-->

        </div>
      </div>
    </div>
  </div>
</template>

<script>
let timer;
import {getArticle, getplayidApi, getremenVideoApi,getremenXinwen1Api, getremenXinwen7Api} from "@/api/api.js";
export default {
  data() {
    return {
      // 新闻鼠标点击状态 默认1为一天
      xwHover:1,
      xinwen: [],
      xinwen1:[],
      xinwen7:[],
      // listid: this.$route.query.listid,
      // daohang: JSON.parse(this.$route.query.titlist),
      list:'',
      shuju:[],
      remenshipinList:[],
      ggList:[],
      jiaoshifazhanList:[],
      xiandaiketangList:[],
      ketiyanjiuList:[],
      daohang:[
        {tit:'首页',path:'homeList'},
        {tit:'新闻中心',path:'xinwenzhongxin'},
        {tit:'聚焦',path:'jujiao'}
      ]
      // SearchText:JSON.parse(this.$route.query.SearchValue)
    };
  },
  created() {
    this.remenshipin(375)
    this.remenxinwen1(388)
    this.remenxinwen7(388)
    this.gg(404)
    this.xiandaiketang(380)
    this.ketiyanjiu(381)
    this.jiaoshifazhan(382)
  },
  methods:{
    pageTo(e){
      this.$router.push(e.path)
    },
    edd(e){
      this.xwHover=e
      if(e==1){
        this.xinwen=this.xinwen1
      }else{
        this.xinwen=this.xinwen7
      }
    },
    remenshipin(e){
      let params = {
        cid:e
      };
      getremenVideoApi(params).then(res => {
        if (res.status==200) {
          this.remenshipinList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    remenxinwen1(e){
      let params = {
        cid:e
      };
      getremenXinwen1Api(params).then(res => {
        if (res.status==200) {
          this.xinwen1=res.data
          console.log(11111111111,this.xinwen)
          this.xinwen=res.data
        } else {
          console.log(22222222222)
          console.log(res.msg)
        }
      });
    },
    remenxinwen7(e){
      let params = {
        cid:e
      };
      getremenXinwen7Api(params).then(res => {
        if (res.status==200) {
          this.xinwen7=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    gg(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.ggList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    // 传递选中子数据id 跳转到新页面
    addList(e,tit){
      let listid = e.id// 告诉新页面 我从哪里来的
      var titlist=JSON.stringify(tit);
      this.$router.push({
        path:'listIndex',
        query:{
          listid,
          titlist
        }
      })
    },
    jiaoshifazhan(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.jiaoshifazhanList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    ketiyanjiu(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.ketiyanjiuList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    xiandaiketang(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.xiandaiketangList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    addtitle(e){
      let listid = e
      let tit = [
        {tit:'首页',path:'homeList'},
        {tit:'新闻中心',path:'xinwenzhongxin'},
        {tit:'聚焦',path:'jujiao'}
      ]
      var titlist=JSON.stringify(tit);
      this.$router.push({
        path:'middleList',
        query:{
          listid,
          titlist
        }
      })
    }
  },
  mounted() {

  }
};
</script>

<style scoped>
.listba{
  background: url("../../assets/img/xiexian.png");
  background-size: contain;
}
.bColor{
  color: #255B9E;
}
.steps{
  padding: 5px;
  border: 1px solid darkgray;
  color: #c23c8b;
  cursor: context-menu;
}
.steps_title{
  font-size: 16px;
  color: #555555;
  padding: 15px 0 0;
  cursor: pointer;
}
.sbzz{
  cursor: context-menu
}
.ba1{
  background-color:#f35a55 ;
}
.ba2{
  background-color: #f79690;
}
.ba3{
  background-color:#fabdba ;
}
.ba4{
  background-color: #0263c2;
}
.ba5{
  background-color:#3582d0 ;
}
.ba6{
  background-color: #81b1e1;
}
.ba7{
  background-color: #4ac4f7;
}
.ba8{
  background-color: #92dbfb;
}
.ba9{
  background-color: #b7e7fd;
}
.ba10{
  background-color: #b8e7fb;
}
</style>
<style>
.ba1{
  background-color:#f35a55 ;
}
.ba2{
  background-color: #f79690;
}
.ba3{
  background-color:#fabdba ;
}
.ba4{
  background-color: #0263c2;
}
.ba5{
  background-color:#3582d0 ;
}
.ba6{
  background-color: #81b1e1;
}
.ba7{
  background-color: #4ac4f7;
}
.ba8{
  background-color: #92dbfb;
}
.ba9{
  background-color: #b7e7fd;
}
.ba10{
  background-color: #b8e7fb;
}
</style>